// 1.引入useSelector,useDispatch
import { useSelector, useDispatch } from 'react-redux'

// 2.导入创建action对象的方法
import { increment, decrement, incrementNum } from './store/modules/counterStore';

function App() {
	const {count} = useSelector(state => state.counter);
	// 3.得到dispatcher函数
	const dispatcher = useDispatch();
	return (
		<div>
			{/** 4.使用dispatcher修改state */}
			<button onClick={ ()=>{dispatcher(decrement())} }>-</button>
			{count}
			{/** 4.使用dispatcher修改state */}
			<button onClick={ ()=>{dispatcher(increment())} }>+</button>
			{/** 4.使用dispatcher修改state，同时传递参数，参数会被传递到action对象的payload属性 */}
			<button onClick={() => {dispatcher(incrementNum(5))}}>加5</button>
		</div>
	);
}

export default App;
